<?php $bodyClass = "voice" ; ?>
<?php require("../frame/frame_head_echo.php"); ?>

<link rel="stylesheet" href="../css/abp.css" />
<style type="text/css">
	svg {
		position: absolute;
		left: -9999em;
	}
	.blur {
		filter: url(#blur);
		filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=18, MakeShadow=false);
	}
</style>
<script src="../js/CommentCoreLibrary.min.js"></script>
<script src="../js/ABPlayer.js"></script>
<script type="text/javascript">
	window.addEventListener('load',function(){
return;
		var video = document.getElementById('video-1')
		var inst = ABP.create(document.getElementById('load-player'), {
			'src':{
				'playlist':[
					{
						'video'     :  video,
						'comments'  :  './xml/comments.xml'
					}
				]
			},
			'width'   :  1024,
			'height'  :  416
		});

	});
	songPlaybackTime();

	function songPlaybackTime(){
	    var playTime = document.getElementsByClassName("current-time"),
	        surplusTime = document.getElementsByClassName("video-length"),
	        leftTime,
	        rightTime;

	    if(songPlaybackTime){
	      
	        leftTime = parseInt(document.getElementsByClassName("bar").innerTEXT);
	      
	        rightTime = parseInt(document.getElementsByClassName("bar").innerTEXT);
	       
	        playTime.innerHTML = conversionTime(leftTime);
	        surplusTime.innerHTML = "-" + conversionTime(rightTime);
	    } else {
	        
	        playTime.innerHTML = "0:00";
	        surplusTime.innerHTML = "-0:00";
	    }
	};

	function conversionTime(time){
    var surplusMinite,
        surplusSecond,
        cTime;
    
    surplusMinite = Math.floor((time / 60) % 60);
    
    surplusSecond = Math.floor(time % 60);
    if(surplusSecond < 10){
        surplusSecond = "0" + surplusSecond;
    }
    cTime = surplusMinite + ":" + surplusSecond;
    return cTime;
	};

	$(document).ready(function() {
		$('.ABP-Control .ABP-CommentShow').hover(function() {
			
		}, function() {
			
		});
		$('.ABP-Control').append('<div class="loop-btn"></div>');
		$('.ABP-Control .loop-btn').hover(function() {
			
		}, function() {
			
		});
	});
</script>

<div class="container voice-container ppt-12 br-6">
	<div class="title-and-category cf">
		<div class="title fl">
			<h1>声音标题</h1>
			<span class="voice-length">3:56</span>
			<span class="played"><b>2.5万</b>播放</span>
		</div>

		<div class="category fr">
			<a href="./channel_detial.php">好听的动漫频道</a>
			<span>频道</span>
		</div>
	</div>

	<div class="voice-wp">
		<div class="mask">
			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="0" width="0">
				<filter id="blur">
					<feGaussianBlur stdDeviation="18" />
				</filter>
			</svg>
			<div class="voice-wp-bg"><img class="blur" alt="cover" src="../images/page_images/voice_7.jpg" /></div>
			<div class="bg-mask"></div>
		</div>
		
		<video id="video-1" autobuffer="true" loop="loop" data-setup="{}" style="display:none" width="0" height="0" webkit-playsinline>
			<source src="http://echo-mx.qiniudn.com/1771333295.mp3">
			<p>Your browser does not support html5!</p>
		</video>

		<!-- <div id="load-player" class="player">
		</div> -->

<div id="load-player" class="player" style="width: 1024px; height: 416px;">
                <div class="ABP-Unit" style="width: 1024px; height: 416px;">
                    <div class="ABP-Video" tabindex="10">
                        <div class="ABP-Container"
                             style="perspective: 429.619011162767px; -webkit-perspective: 429.619011162767px;"></div>
                        <video id="video-1" autobuffer="true" data-setup="{}" style="display:none" width="0"
                               height="0" webkit-playsinline="">
                            <source src="http://echo-mx.qiniudn.com/1771333295.mp3">
                            <p>Your browser does not support html5!</p>
                        </video>
                    </div>
                    <div class="ABP-Text"><input type="text"></div>
                    <div class="ABP-Control">
                        <div class="button ABP-Play" style="cursor: pointer"></div>
                        <div class="progress-bar" style="height: 16px">
                            <div class="bar dark" style="width: 0%;"></div>
                            <div class="bar" style="width: 0%;"><em style="color: #000">00:00/00:00</em></div>
                        </div>
                        <div class="button ABP-CommentShow"></div>
                        <div class="button ABP-FullScreen"></div>
                        <div class="current-time"></div>
                        <div class="video-length"></div>
                    </div>
                </div>
            </div>

		<div class="voice-cover br-4"><img class="br-4" style="height: inherit" alt="cover" src="../images/page_images/voice_7.jpg" /></div>
	</div>

	<div class="user-and-status cf">
		<div class="user fl">
			<a href="#" class="user-avatar"><img src="../images/page_images/user_3.jpg" class="circle" alt="user-avatar" /></a>
			<div class="user-and-time">
				<a href="#" class="user-name">用户名</a>
				<time class="upload-time">32分钟前 上传</time>
			</div>
		</div>

		<div class="btn-wp cf">
			<a href="#" class="fl ht btn like-btn active" rel="nofollow">喜欢</a>
			<a href="#" class="fl ht btn share-btn" rel="nofollow">分享</a>
		</div>

		<div class="ui-status voice-status fr cf">
			<span class="share" title="分享数目">372</span>
			<span class="like" title="喜欢数目">76</span>
			<span class="comment" title="评论数目">320</span>
		</div>
	</div>

	<div class="comment-form-wp">
		<form action="#" class="comment-form">
			<input class="comment-input br-3" placeholder="在0:50发个弹幕和评论" type="text" />
			<div class="btn-wp cf">
				<!-- <a class="fl ht btn smiley-btn" rel="nofollow" title="" href="#"></a> -->
				<button class="fl btn submit-btn br-2" type="submit">发送</button>
			</div>
		</form>
	</div>
</div>

<div class="container cf">
	<div class="intro br-3">
		<h3>简介</h3>
		<p>
			这里是简介<br /><br />
			这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
			这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
            这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介, 这里是简介<br /><br />
		</p>
	</div>

	<div class="comments br-3">
		<h3>热门评论</h3>
		<ol class="comments-list">
			<li>
				<a href="#" class="user-avatar"><img src="../images/page_images/user_4.jpg" class="circle" alt="user-avatar" /></a>
				<div class="comment-content">
					<a href="#" class="user-name">用户名</a>
					<time class="comment-time">2分钟以前</time>
					<p>这里是评论, 这里是评论, 这里是评论, 这里是评论</p>
				</div>
				<div class="btn-wp cf">
					<a href="#" class="btn reply-btn" rel="nofollow">回复</a>
					<a href="#" class="btn zan-btn" rel="nofollow">赞(8127)</a>
				</div>
			</li>
			<li>
				<a href="#" class="user-avatar"><img src="../images/page_images/user_5.jpg" class="circle" alt="user-avatar" /></a>
				<div class="comment-content">
					<a href="#" class="user-name">用户名</a>
					<time class="comment-time">2分钟以前</time>
					<p>这里是评论, 这里是评论, 这里是评论, 这里是评论</p>
				</div>
				<div class="btn-wp cf">
					<a href="#" class="btn reply-btn" rel="nofollow">回复</a>
					<a href="#" class="btn zan-btn active" rel="nofollow">赞(8127)</a>
				</div>
			</li>
			<li>
				<a href="#" class="user-avatar"><img src="../images/page_images/user_5.jpg" class="circle" alt="user-avatar" /></a>
				<div class="comment-content">
					<a href="#" class="user-name">用户名</a>
					<time class="comment-time">2分钟以前</time>
					<p>这里是评论, 这里是评论, 这里是评论, 这里是评论</p>
				</div>
				<div class="btn-wp cf">
					<a href="#" class="btn reply-btn" rel="nofollow">回复</a>
					<a href="#" class="btn zan-btn" rel="nofollow">赞(8127)</a>
				</div>
			</li>
		</ol>
	</div>
</div>

<div class="voice-share-inner-wp">
    <div class="voice-share-inner">
        <div class="voice-share">
            <div class="title-and-btn cf">
                <h4 class="fl">分享<a href="#">echo回声更新版本啦！</a>的声音</h4>
                <span class="close-btn fr"></span>
            </div>
            <ul class="cf">
                <li><a href="#jiathis_button_tsina">微博</a></li>
                <li><a href="#jiathis_button_weixin">微信</a></li>
                <li><a href="#jiathis_button_douban">豆瓣</a></li>
                <li><a href="#jiathis_button_renren">人人</a></li>
                <li><a href="#jiathis_button_qzone">QQ空间</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="jiathis_style hide">
    <a class="jiathis_button_qzone"></a>
    <a class="jiathis_button_tsina"></a>
    <a class="jiathis_button_weixin"></a>
    <a class="jiathis_button_renren"></a>
    <a class="jiathis_button_douban"></a>
</div>
<script type="text/javascript">
    var jiathis_config = {
        title: "echo回声更新版本啦！（来自@echo回声APP）",
        url: "http://echo.kibey.com/sound/341613",
        ralateuid: {
            "tsina": "echoapp"
        },
        appkey: {
            "tsina": "3898630147"
        },
        shortUrl: false,
        hideMore: true
    }
    $(document).ready(function () {
        $('.share-btn').on('click', function (e) {
            if ($('.voice-share-inner-wp').hasClass('active')) {
                $('html').css({'height':'auto','overflow':'visible'});
                $('body').css({'height':'auto','overflow':'visible'});
                $('.voice-share-inner-wp').removeClass('active');
            } else {
                $('html').css({'height':'100%','overflow':'hidden'});
                $('body').css({'height':'100%','overflow':'hidden'});
                $('.voice-share-inner-wp').addClass('active');
                e.preventDefault();
            }
        });
        $('.close-btn').on('click', function (e) {
            $('html').css({'height':'auto','overflow':'visible'});
            $('body').css({'height':'auto','overflow':'visible'});
            $('.voice-share-inner-wp').removeClass('active');
        });
        $('.voice-share-inner-wp li a').on('click', function () {
            var className = $(this).attr('href').replace('#', '.');
            $(className).click();
        });
    })

        //Support Emoji
        $(function(){
            twemoji.parse($('.comments-list')[0], {
          size: 16,
          callback: function(icon, options) {
              return 'http://kibey-static.qiniudn.com/emoji/' + options.size + '/' + icon + '.png';
          }
            });
        });
</script>

<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js" charset="utf-8"></script>

    <!-- TODO flash 容器，不能设置成隐藏元素，否则flash不能正常工作 -->
    <div id="sewise_player_container" style="/*visibility: hidden;*/ opacity: 0; z-index: -999999; border: none; margin: 0; padding: 0; width: 100px; height: 1px"></div>

    <!-- TODO 替换成本地的sewise播放器地址 -->
    <script src="http://echo.kibey.com/js/sewise-player/sewise.player.min.js"></script>
    <script type="text/javascript">
    (function (context) {
        var extend = function (obj, extend) {
            obj = obj || {};
            for(var prop in extend) {
                obj[prop] = extend[prop];
            }
            return obj;
        };
        /**
         * 双核音乐播放器: m3u8(url是以.m3u8结尾的资源)会切到flash sewise player，其他走html5
         * options: id: html5 video element id
         * options_sewise: id: flash container id, can not be 'sewise-player'
         * TODO sewise player 有很多坑，例如拿不到声音的播放状态(暂停、播放中)，所以在换另一个m3u8播放器之前尽量不要让用户快进歌曲
         * TODO 注意如果是手机浏览的，不要用这个播放器，如果是iphone、ipad等ios系统，在h5上可直接播放m3u8音乐，否则（例如安卓）播放版权的音乐
         */
        var MPlayer = function (options, options_sewise) {
            options_sewise = extend({
                server: "vod",
                type: "m3u8",
                buffer: 1,
                autostart: options.autoStart ? "true" : "false",
//                skin: "vodWhite",
////                        lang: "zh_CN",
//                        draggable: "true",
                claritybutton: "disable",
                videourl: "#",
                title: ""
            }, options_sewise || {});
            this.options = options;
            this.options_sewise = options_sewise;
            this.sewise_paused = true;
            this.debug = options.debug || false;
            this.loop = options.loop ? true : false;
            this.resumeCurrentTime = options.resumeCurrentTime ? true : false;
//                this.autoStart = options.autoStart ? true : false;
            this.html5Player = document.getElementById(this.options.id);
            this.html5Player.loop = false;
            if(! this.html5Player.play) {
                var empty_function = new Function;
                this.html5Player.play = this.html5Player.pause = empty_function;
            }
            this.sewisePlayer = SewisePlayer;
            this.setSrc(options.src);
        }

        extend(MPlayer.prototype, {
            bootstrap: function () {
                var ctx = this;
                this.sewisePlayer.setup(this.options_sewise, this.options_sewise.id);
                this.attachDefaultEventHandlers();

                if(this.useSewisePlayer() && ! /firefox/i.test(navigator.userAgent)) {
                    this.sewisePlayer.playerReady(function (id) {
                        ctx.onready()({is_flash: true, params: {id: id}}, ctx);
                    });
                } else {
                    ctx.onready()({}, ctx);
                }

                this.sewisePlayer.onMetadata(function (meta, id) {
                    ctx.onloadeddata()({is_flash: true, params: {meta: meta, id: id}}, ctx);
                });
                this.html5Player.onloadeddata = function (e) {
                    ctx.onloadeddata()(e, ctx);
                };

                this.sewisePlayer.onStart(function (id) {
                    ctx.onplaying()({is_flash: true, params: {id: id}}, ctx);
                });
                this.html5Player.onplaying = function (e) {
                    ctx.onplaying()(e, ctx);
                };

                this.sewisePlayer.onPlayTime(function (time, id) {
                    if(Math.floor(this.last_sewise_time || 0) === Math.floor(time)) {
                        return;
                    }
                    ctx.cached_ontimeupdate = ctx.cached_ontimeupdate || ctx.ontimeupdate();
                    ctx.cached_ontimeupdate({is_flash: true, params: {time: time, id: id}}, ctx);
                    this.last_sewise_time = time;
                });
                this.html5Player.ontimeupdate = function (e) {
                    if(Math.floor(this.last_html5_time || 0) === Math.floor(this.currentTime)) {
                        return;
                    }
                    ctx.cached_ontimeupdate = ctx.cached_ontimeupdate || ctx.ontimeupdate();
                    ctx.cached_ontimeupdate(e, ctx);
                    this.last_html5_time = this.currentTime;
                };

                this.sewisePlayer.onPause(function (id) {
                    ctx.onpause()({is_flash: true, params: {id: id}}, ctx);
                });
                this.html5Player.onpause = function (e) {
                    ctx.onpause()(e, ctx);
                };

                this.sewisePlayer.onStop(function (id) {
                    ctx.onended()({is_flash: true, params: {id: id}}, ctx);
                });
                this.html5Player.onended = function (e) {
                    ctx.onended()(e, ctx);
                };
            },
            useSewisePlayer: function (src) {
                if(typeof this._isSafari_ === 'undefined') {
                    this._isSafari_ = !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/);
                }
                if(this._isSafari_) { // do not use flash if it is safari
                    return false;
                }
                return /\.m3u8(?=[?#]|$)/.test(src || this.src);
            },
            player: function(use_sewise_player) {
                use_sewise_player = arguments.length === 0 ? this.useSewisePlayer() : null;
                return use_sewise_player ? this.sewisePlayer : this.html5Player;
            },
            onready: function (callback /* function (event {is_flash, params.id}, context) */) {
                return this.buildEventHandler.apply(this, ['onready'].concat([].slice.call(arguments)));
            },
            onloadeddata: function (callback /* function (event, context) */) {
                return this.buildEventHandler.apply(this, ['onloadeddata'].concat([].slice.call(arguments)));
            },
            onplaying: function (callback /* function(event, context) */) {
                return this.buildEventHandler.apply(this, ['onplaying'].concat([].slice.call(arguments)));
            },
            ontimeupdate: function (callback /* function(event, context) */) {
                return this.buildEventHandler.apply(this, ['ontimeupdate'].concat([].slice.call(arguments)));
            },
            onpause: function (callback /* function(event, context) */) {
                return this.buildEventHandler.apply(this, ['onpause'].concat([].slice.call(arguments)));
            },
            onended: function (callback /* function(event, context) */) {
                return this.buildEventHandler.apply(this, ['onended'].concat([].slice.call(arguments)));
            },
            play: function(src) {
                if(arguments.length === 0) {
                    if(this.useSewisePlayer()) {
                        try {
//                            this.html5Player.pause();
                            if(this.resumeCurrentTime) {
                                // SewisePlayer does not provide any flag for whether the song is playing or not
                                // if you want to FORCE resume playing(we do not sync play/pause state via onplay or onpause event), you can play it from current time
                                // this.sewisePlayer.toPlay(this.src, '', this.currentTime(), true);
                                // but it's a bit slower than doPlay method
                                this.sewisePlayer.toPlay(this.src, '', this.currentTime(), true);
                                this.sewise_paused = false;
                                return;
                            }

                            if(this.sewise_paused) {
                                this.sewisePlayer.doPlay();
                                this.sewise_paused = false;
                            }
                        } catch (e) {
                            console.log('play error(flash play): ', e);
                        }
                    } else {
//                        try {
//                            this.sewisePlayer.doPause();
//                        } catch (e) {
//                            console.log('play error(flash pause): ', e);
//                        }
                        this.html5Player.play();
                    }
                    return;
                }

                if(this.useSewisePlayer(src)) {
                    this.html5Player.pause();
                    this.src = src;
                    // toPlay(url, title, startTime, autoPlay)
                    this.sewisePlayer.toPlay(src, '', 0, true);
                    this.sewise_paused = false;
                } else {
                    try {
                        this.sewisePlayer.doPause();
                    } catch (e) {
                        console.log('play error(flash pause): ', e);
                    }
                    this.setSrc(src);
                    try {
                        this.html5Player.currentTime = 0;
                    } catch (ex) {
                        console.log(ex);
                    }
                    this.html5Player.play();
                }
            },
            pause: function() {
                if(this.useSewisePlayer()) {
                    this.sewisePlayer.doPause();
                    this.sewise_paused = true;
                } else {
                    this.html5Player.pause();
                }
            },
            duration: function () {
                return this.useSewisePlayer() ? this.sewisePlayer.duration() : this.html5Player.duration;
            },
            currentTime: function () {
                return this.useSewisePlayer() ? this.sewisePlayer.playTime() : this.html5Player.currentTime;
            },
            paused: function () {
                return this.useSewisePlayer() ? this.sewise_paused : this.html5Player.paused;
            },
            loop: function (loop) {
                ctx.loop = loop;
            },
            setSrc: function (src) {
                if(! src) {
                    return;
                }
                this.src = src;
                if(this.useSewisePlayer(this.src)) {
                    var ctx = this;
                    var change_src = function () {
                        try { ctx.sewisePlayer.toPlay(src, '', 0, false); } catch(ex) { console.log(['Error: ', ex]); }
                    };
                    this.sewisePlayer.toPlay ? change_src() : this.onready(change_src);
                } else {
                    // this.html5Player.src = this.src;
                    this.setMediaSrc(src);
                }
            },
            setMediaSrc: function (url) {
                var player = this.html5Player;
                // Fix for IE9 which can't set .src when there are <source> elements. Awesome, right?
                var existingSources = player.getElementsByTagName('source');
                while (existingSources.length > 0){
                    player.removeChild(existingSources[0]);
                }
                player.src = url;
            },
//                stop: function () {
//
//                },
            seek: function (time) {
                if(this.useSewisePlayer()) {
                    this.sewisePlayer.doSeek(time);
                } else {
                    this.html5Player.currentTime = time;
                }
            },
            getDefaultEventHandler: function (event_name) {
                var ctx = this;
                return function (e) {
                    if(ctx.debug) {
                        console.log('Mplayer.' + event_name + '(' + (e.is_flash ? 'flash' : 'html5') + '): ', arguments);
                    }
                    var use_sewise_player = ctx.useSewisePlayer();
                    if(event_name === 'onended') {
                        if(ctx.loop) {
                            if(use_sewise_player) {
                                ctx.sewise_paused = true;
                            }
                            ctx.play();
                        } else if(!use_sewise_player && window.ActiveXObject) {
                            // in IE, onpause event is not triggered when audio is ended, so we fire it manually
                            ctx.html5Player.pause();
                        } else if(use_sewise_player) {
                            ctx.sewise_paused = true;
                        }
                        return;
                    }
                    if(use_sewise_player && event_name === 'onplaying') {
                        ctx.sewise_paused = false;
                    }
                }
            },
            attachDefaultEventHandlers: function () {
                var events = ['onload', 'onloadeddata', 'onplaying', 'ontimeupdate', 'onpause', 'onended'];
                for (var i in events) {
                    this.eventHandler(events[i], this.getDefaultEventHandler(events[i]));
                }
            },
            eventHandler: function (event_name, handler) {
                var key = event_name + '_handlers';
                if(! handler) {
                    if(arguments.length > 1) {
                        this[key] = [];
                    }
                    return this[key] || [];
                }
                this[key] = (this[key] || []).concat(handler);
                return handler;
            },
            buildEventHandler: function (event_name, callback) {
                var ctx = this;
                if(arguments.length === 1) {
                    var handlers = this.eventHandler(event_name);
                    return function () {
                        for(var i in handlers) {
                            handlers[i].apply(null, [].slice.call(arguments));
                        }
                    }
                }
                this.eventHandler(event_name, callback);
            }
        });

        context.MPlayer = MPlayer;
    })(window);

    $(function () {

        if(! $('#video-1')[0]) {
            return; // 没有video元素则返回
        }

        formatTime = function(seconds, guide) {
            guide = guide || seconds;
            var s = Math.floor(seconds % 60),
                m = Math.floor(seconds / 60 % 60),
                h = Math.floor(seconds / 3600),
                gm = Math.floor(guide / 60 % 60),
                gh = Math.floor(guide / 3600);
            if (isNaN(seconds) || seconds === Infinity) {
                h = m = s = '-';
            }
            h = (h > 0 || gh > 0) ? h + ':' : '';
            m = (((h || gm >= 10) && m < 10) ? '0' + m : m) + ':';
            s = (s < 10) ? '0' + s : s;
            return h + m + s;
        };

        // TODO 为方便调试, mplayer弄成全局变量了，部署线上时最好把var解注释掉
        /*var */mplayer = new MPlayer({id: 'video-1' /* , resumeCurrentTime: true, loop: true */}, {id: 'sewise_player_container'});
/*        var toggle_play_button = function(is_paused, music_button) {
            if (is_paused) {
                $('.echo-player-current-playing').html('');
                $('#echo-player-play-pause').removeClass('echo-player-pause-toggle');
                $('.voice-wp-left .play-btn').removeClass('playing');
                $('.book_radio .play-btn').removeClass('playing');
            } else {
                $('#echo-player-play-pause').addClass('echo-player-pause-toggle');
                $('.echo-player-current-playing').html(radio_title);
                $('.voice-wp-left .play-btn').addClass('playing');
                $('.book_radio .play-btn').removeClass('playing');
                if(music_button) {
                    $(music_button).addClass('playing');
                }
            }
        }*/
        var button = $('#load-player .ABP-Control .button');
        var onready = function (e, ctx) {
            $("body").on("click", ".ABP-Control .button", function(event){
                if (ctx.paused()) {
                    ctx.play();
                    button.addClass('ABP-Pause');
//                    toggle_play_button(0, isSingleAudio() ? $('.book_radio .play-btn') : null);
                } else {
                    ctx.pause();
                    button.removeClass('ABP-Pause');
//                    toggle_play_button(1);
                }
                if(/firefox/i.test(navigator.userAgent) && ctx.useSewisePlayer()) {
                    alert('暂时不支持此浏览器，请用其他浏览器，例如chrome浏览哦')
                }
            });
//                ctx.onplaying(function(e, ctx) { // 播放事件，不建议使用
//                    $('#echo-player-play-pause').addClass('echo-player-pause-toggle');
//                    $('.echo-player-current-playing').html(radio_title);
//                    $('.voice-wp-left .play-btn').addClass('playing');
//                });
//                ctx.onpause(function(e, ctx) { // 暂停事件，不建议使用
//                    $('.echo-player-current-playing').html('');
//                    $('#echo-player-play-pause').removeClass('echo-player-pause-toggle');
//                    $('.voice-wp-left .play-btn').removeClass('playing');
//                    $('.book_radio .play-btn').removeClass('playing');
//                })
            ctx.ontimeupdate(function(e, ctx) { // 时间更新事件
                var current_time = ctx.currentTime();
                var bar = $('.ABP-Control .bar');
                var duration = ctx.duration();
                bar.find('em').html(formatTime(current_time) + '/' + formatTime(duration));
                bar.css('width', Math.round(current_time * 10000 / duration) / 100 + '%');
            });
            ctx.onloadeddata(function (e, ctx) {
                // TODO 当声音元信息加载完时触发此事件
                $('.ABP-Control .bar em').html('00:00' + '/' + formatTime(ctx.duration()));
            });
            ctx.onended(function (e, ctx) {

                // TODO 切换到下一首歌曲 调用 ctx.play(src) 可以直接播放音乐 其中src是声音url
                // TODO              或者调用 ctx.setSrc(src) 设置音乐地址，然后调用ctx.play()播放也可以

                // TODO remove test switching different music files
                if(! ctx.firstSrc) {
                    ctx.firstSrc = ctx.src;
                }
                ctx.setSrc(ctx.firstSrc === ctx.src ? /* 'http://7u2r6o.com2.z0.glb.qiniucdn.com/eb5bab82d643cc410be0b1c39721b4741feb0ee621c9ac0285f084bc3943641ab25f8801.m3u8?attname=' */ 'http://7fvgtj.com2.z0.glb.qiniucdn.com/ec473041665bad7254a40cfc499f59a1' : ctx.firstSrc);
                $(".ABP-Control .button").click();

                return;
            });

            $("body").on('click','.book_radio .play-btn',function(){
                src = $(this).parents('.book_radio').attr('data-url');
                src = D(src);
                radio_title = $(this).parents('.book_radio').find('.s_name').attr('title');
//                    $('.book_radio .play-btn').removeClass('playing');
//                    $(this).addClass('playing');
                if(ctx.src != src){
                    // player.setSrc(src);
                    // ctx.setSrc(src);
                    ctx.play(src);
                    toggle_play_button(0, this);
                } else {
                    // $("#echo-player-play-pause").click();
                    if(ctx.paused()) {
                        ctx.play();
                        toggle_play_button(0, this);
                    } else {
                        ctx.pause();
                        toggle_play_button(1, this);
                    }
                }
                if(/firefox/i.test(navigator.userAgent) && ctx.useSewisePlayer()) {
                    alert('暂时不支持此浏览器，请用其他浏览器，例如chrome浏览哦')
                }
                // $("#echo-player-play-pause").click();
            })
            /*播放列表*/
            $("body").on('click','.play_list_btn',function(){
                src = $(this).attr('video_list');
                $.ajax({
                    type:'GET',
                    url: src,
                    dataType:'json',
                    success: function(list){
                        if(list.length==0)
                            return;
                        audioList = list;
                        /*取播放列表*/
                        random = getRandom(audioList.length-1);
                        radio_title = audioList[random]['title'];
                        src = audioList[random]['source'];
                        // player.setSrc(D(src));
                        // ctx.setSrc(D(src));
                        // $("#echo-player-play-pause").click();
                        if(ctx.src != src){
                            ctx.play(src);
                            toggle_play_button(0);
                        } else {
                            if(ctx.paused()) {
                                ctx.play();
                                toggle_play_button(0);
                            } else {
                                ctx.pause();
                                toggle_play_button(1);
                            }
                        }
                    }
                });
            })
        };
        mplayer.onready(onready);
        mplayer.debug = true; // 打开调试模式
        (function (ctx) {
            // TODO remove testing data-url, 此处应该换成声音的地址
            var url = 'http://echo-mx.qiniudn.com/3382610.mp3';
            url = 'http://7u2r6o.com2.z0.glb.qiniucdn.com/a9ef27012c08a78dcfbd75c86e2bdc9d14ec4ce7416037aa4db9e8c5396471bc153ff4cc.m3u8?1423033203';
            ctx.setSrc(url);
        })(mplayer);
        mplayer.bootstrap(); // 初始化播放器
    });
    </script>

<?php require("../frame/frame_foot.php"); ?>
